{include file="common/header"}
<script type="text/javascript" charset="utf-8" src="/plugins/tinymceeditor/static/tinymce/tinymce.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugins/tinymceeditor/static/index/tinymceeditor.js"></script>
<div id="app" v-cloak>
    <div class="el-blog-publish-warp">
        <div class="el-warp">
            <div class="el-blog-publish">
                <div class="left">
                    <div class="header">
                        编辑帖子&nbsp;&nbsp;-&nbsp;&nbsp;<a :href="form.url">点击访问</a>
                    </div>
                    <div class="item">
                        <el-input v-model="form.title" maxlength="60" placeholder="请添加标题..." show-word-limit></el-input>
                    </div>
                    <div class="item">
                        <el-editor v-model="form.content" placeholder="请添加内容..."></el-editor>
                    </div>
                </div>
                <div class="right">
                    <div class="header">
                        <span style="color: rgb(255, 94, 84); vertical-align: middle; line-height: 1;">*</span>发布板块
                    </div>
                    <div class="item-warp">
                        <el-button 
                            v-for="(item, index) in catalog" 
                            class="item" 
                            size="small"
                            :class="{active: form.catalog_id.indexOf(item.id) != -1}"
                            @click="choose(item.id)">
                            {{item.title}}
                        </el-button>
                    </div>
                    <el-button class="publish" type="primary" :disabled="disabled" @click="update()" v-loading="loading">修改</el-button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var catalog = {:json_encode(catalog_level(2, 'blog'))};
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    content: '',
                    title: '',
                    catalog_id: [],
                },
                loading: false,
            }
        },
        computed: {
            disabled() {
                if (this.form.title != '' && this.form.content != '' && this.form.catalog_id != '') {
                    return false;
                } else {
                    return true;
                }
            }
        },
        created() {
            let self = this;
            post('api/blog/blog/single', {id: locationUrl.get('id')}, function(res){
                if (res.status === "success") {
                    self.form = res.data;
                }
            });
        },
        methods: {
            update() {
                let self = this;
                self.loading = true;
                post('api/blog/userBlog/update', self.form, function(res){
                    self.loading = false;
                    self.$notify({showClose: true, message: res.message, type: res.status});
                });
            },
            choose(id) {
                let index = this.form.catalog_id.indexOf(id);
                if (index == -1) {
                    this.form.catalog_id.push(id)
                } else {
                    this.form.catalog_id.splice(index, 1);
                }
            }
        },
    });
</script>
{include file="common/footer"}